import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { Card, Col, ConfigProvider, Input, Row, Table, Tabs } from 'antd';
import { DesignFrameworkContext } from './context';
import QuickCodeRender from '../render';
import { QuickCodeProvider } from '../render/context';
import { DndProvider, useDrop } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';
import { deleteArrayBy, moveArrayBy, pushArrayBy, replaceArrayField } from '@/pages/quick-code/@quick-code/design/utils/array';
import Material from './mods/Material';
import { addIdProperty, getId } from './utils';
import RcDrag from './RcDrag';

import QuickGrid from '../material/QuickGrid/design';
import QuickCard from '../material/QuickCard/design';
import QuickInput from '../material/QuickInput/design';
import QuickTable from '../material/QuickTable/design';
import QuickTabs from '../material/QuickTabs/design';
import MiniApp from '../material/MiniApp/design';
import AppContainer from '../material/AppContainer/design';
import Text from '../material/Text/design';
import QueryFilter from '../material/QueryFilter/design';
import DesignPanel from './mods/DesignPanel';
import Placeholder from '../material/Placeholder/design';
import Toolbar from '../material/Toolbar/design';
import Container from '../material/Container/design';
import QuickCollapse from '../material/QuickCollapse/design';
import Header from './mods/Header';
import _ from 'lodash';
import QuickButton from '../material/QuickButton/design';
import RcReplace from './RcReplace';

interface DesignFrameworkProviderProps {
  // children: any
}

const App = () => {
  const [activeItem, setActiveItem] = useState({});
  const [schema, setSchema] = useState({
    id: getId(),
    component: 'AppContainer',
    children: [
      // {
      //   id: 2222,
      //   component: 'QueryFilter'
      // },
      {
        id:22234,
        component:'QuickCollapse',
        children:[{
            id:getId(),
            component:'QuickCollapsePanel',
            $schema:{
              header:{
                component:'QuickButton',
                id:getId()
              }
            }
        }]
      },
      {
        id: getId(),
        component: 'QuickTabs',
        // childrenWrap: 'RcDrag',
        children: [
          {
            component: 'QuickTabsPanel',
            id: getId(),
          },
          {
            component: 'QuickTabsPanel',
            id:getId(),
          }
        ]
      },
      {
        id: getId(),
        component: 'QuickInput'
      },
      {
        id: getId(),
        component: 'QuickTable'
      },
      {
        id:getId(),
        component:'QuickGrid',
        children:[{
          id:getId(),
          component:'QuickGridCol'
        },{
          id:getId(),
          component:'QuickGridCol'
        }]
      },
      //  {
      //   id: 44444444,
      //   component: "MiniApp",
      //   props: {
      //     entry: 'https://static.weillan.com/www/biz-dev/weillan-chat/1.1.0/static/pages/home.js'
      //   }
      // },
      {
        id: getId(),
        component: 'QuickCard',
        // children: [
        //   {
        //     id: 22222,
        //     component: 'QuickCard',
        //     // remoteComponent: '',
        //     children: [{
        //       id: 1111,
        //       component: 'QuickInput'
        //     }, {
        //       id: 22222222,
        //       component: 'QuickInput'
        //     }, {
        //       id: 3333,
        //       component: 'QuickInput'
        //     }, {
        //       id: 4444,
        //       component: 'QuickInput'
        //     }]
        //   }
        // ]
      }
    ]
  })
 
  const updateDesign = useCallback(() => {
    setSchema({ ...schema });

  }, [schema])
  const moveItemById = useCallback(({ originalId, targetId, item, addIndex }: any) => {
    if (originalId) {

      schema.children = moveArrayBy(schema.children, originalId, targetId, 'id', addIndex)
    } else {
      // debugger
      let _item = addIdProperty(_.cloneDeep(item))
      //  _item = replaceArrayField([_item], 'id', () => getId())[0]
      console.log('__item',item,_item)
      schema.children = pushArrayBy(schema.children, targetId, 'id', _item, addIndex)
    }
    console.log('moveItemById1=', schema, originalId, targetId)

    updateDesign()
  }, [updateDesign])
  const deleteItemById = useCallback((targetId) => {
    schema.children = deleteArrayBy(schema.children, targetId, 'id')
    updateDesign()
  }, [updateDesign])
 
  const [, drop] = useDrop(() => ({ accept: '11' }))
  const value = useMemo(() => ({
    schema,
    activeItem,
    updateDesign,
    selectItem: setActiveItem,
    moveItemById,
    deleteItemById,
    registerDesignPanel: {
      QuickTabs: QuickTabs.Design,
      QuickCard: QuickCard.Design,
      QuickGrid: QuickGrid.Design,
      QuickInput: QuickInput.Design,
      QuickTable: QuickTable.Design,
      MiniApp: MiniApp.Design,
      AppContainer: AppContainer.Design,
      Placeholder: Placeholder.Design,
      Container: Container.Design,
 
      
      Text: Text.Design,
    }
  }), [schema, moveItemById, QueryFilter, activeItem])
  return <div ref={drop}>
    <QuickCodeProvider
      ItemRender={RcDrag}
      SingleRender={RcReplace}
      registerComponents={{
        QuickCard: QuickCard.Render,
        QuickInput: QuickInput.Render,
        QuickTable: QuickTable.Render,
        QuickTabs: QuickTabs.Render,
        QuickTabsPanel: QuickTabs.Render.Panel,
        MiniApp: MiniApp.Render,
        AppContainer: AppContainer.Render,
        Text: Text.Render,
        QuickButton: QuickButton.Render,
        QuickGrid: QuickGrid.Render,
        QuickGridCol: QuickGrid.Render.QuickGridCol,
        QueryFilter: QueryFilter.Render,
        Toolbar: Toolbar.Render,
        Placeholder: Placeholder.Render,
        Container: Container.Render,
        QuickCollapse: QuickCollapse.Render,
        QuickCollapsePanel: QuickCollapse.Render.Panel,
        RcDrag,
        
      }}>
      <DesignFrameworkContext.Provider value={value}>
        <Header />
        <Row>
          <Col flex='300px'>
            <Material />
          </Col>
          <Col flex='auto'>
            <QuickCodeRender schema={schema} />
          </Col>
          <Col flex='300px'>
            <DesignPanel />
          </Col>
        </Row>

      </DesignFrameworkContext.Provider>
    </QuickCodeProvider>
  </div>
}
const DesignFrameworkProvider = ({ }: DesignFrameworkProviderProps) => {

  return (

    <DndProvider backend={HTML5Backend}>
      <App />
    </DndProvider>
  )
}
export default DesignFrameworkProvider